<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>360商场</title>
    <link rel="shortcut icon" href="img/favicon.png">
    <link rel="stylesheet" href="font/iconfont.css">

    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/cartlist.css">

    <!-- 用户登录注册功能 -->
    <script src="./script/registry_module.js" type="module"></script>
    <script src="./script/login_module.js" type="module"></script>
    <script src="./script/user_module.js" type="module"></script>

    <script src="./script/cartlist_module.js" type="module"></script>

    <script src="./script/side_module.js" type="module"></script>

</head>

<body>
    <!-- 头部导航 -->
    <header>
        <div class="header_box">
            <div class="wrapper">
                <nav>
                    <a href="#">帮助中心 </a>
                    <a href="#">收藏 </a>
                    <a href="index.html">360官网 </a>
                    <a href="#">360智慧生活 </a>
                </nav>
                <!-- 用户的盒子 -->
                <div class="user_box">
                    <div class="user_login">
                        <a href="javascript:;" class="us_log"> 登录 </a>
                        <a href="javascript:;" class="us_reg"> 注册 </a>
                    </div>
                    <!-- 用户name -->
                    <div class="user_name">
                        <a href="javascript:;" class="us_name">用户名</a>
                        <a href="javascript:;" class="quit_btn">退出</a>
                    </div>
                    <div class="download_box">
                        <a href="#">手机360商城</a>
                        <div class="download_hover_box" style="display: none;">
                            <img src="https://p4.ssl.qhimg.com/t01912e4fcc88786eca.png">
                            <p class="download-title">手机360商城</p>
                            <p class="download-text">扫码下载</p>
                        </div>
                    </div>

                    <!-- 购物车 -->
                    <div class="cart_box">
                        <a href="cartlist.html"><i class="iconfont">&#xf0179;</i></a>
                    </div>
                </div>
            </div>
        </div>
    </header>

    <!-- 侧边导航 -->
    <div class="side_box">
        <ul class="side_ico">
            <li>
                <span class="iconfont icon-xinxi"></span>
                <div class="side_hint">
                    <a href="">意见反馈</a>
                </div>
            </li>
            <li>
                <span class="iconfont icon-li-gongzhonghao"></span>
                <div class="side_hint">
                    <img src="https://p.ssl.qhimg.com/t0168294b49a2468fa5.png" alt="">
                    <a href="">关注公众号</a>
                </div>
            </li>
            <li>
                <span class="iconfont icon-kefu"></span>
                <div class="side_hint">
                    <a href="">在线客服</a>
                </div>
            </li>
            <li>
                <span class="iconfont icon-ico"></span>
                <div class="side_hint">
                    <a href="">
                        <img src="https://p5.ssl.qhimg.com/t01f74c5c76d0fad490.png" style="width: 128px;height: 230px;">
                    </a>
                </div>
            </li>
            <li>
                <span class="iconfont icon-dingbu"></span>
                <div class="side_hint">
                    <a href="">返回顶部</a>
                </div>
            </li>
        </ul>
    </div>

    <!-- 用户盒子 -->
    <div class="users">
        <!-- 遮罩层 -->
        <div class="mask"></div>
        <!-- 用户登录盒子 -->
        <div class="login_box">
            <div class="log_close iconfont">&#xe609;</div>
            <form action="" method="POST">
                <h2>360账号登录</h2>
                <p>
                    <input type="text" placeholder="手机号码/用户名/邮箱" class="log_tel import" name="log_tel">
                    <span class="log_tel_hint hint"></span>
                </p>
                <p>
                    <input type="password" placeholder="密码" class="log_pass import" name="log_pass">
                    <span class="log_pass_hint hint"></span>
                </p>
                <p>
                    <input type="button" value="登录" class="log_btn" name="login_btn">
                </p>
                <p>
                    <a href="javascript:;" class="fast_reg">快速注册</a>
                    <a href="javascript:;" class="find_pass">找回密码</a>
                </p>
            </form>
        </div>
        <!-- 用户注册盒子 -->
        <div class="registry_box">
            <div class="reg_close iconfont">&#xe609;</div>
            <form action="http://10.31.165.61/JS2012/mall360/php/registry.php" id="registry" method="POST">
                <h2>360账号注册</h2>
                <p>
                    <input type="text" placeholder="手机号" class="reg_tel import" name="reg_tel">
                    <span class="reg_tel_hint hint"></span>
                    <i class="iconfont">&#xe627;</i>
                </p>
                <p>
                    <input type="password" placeholder="密码" class="reg_pass import" name="reg_pass">
                    <span class="reg_pass_hint hint"></span>
                    <i class="iconfont">&#xe60f;</i>
                </p>
                <p>
                    <input type="password" placeholder="确认密码" class="reg_repass import" name="reg_repass">
                    <span class="reg_repass_hint hint"></span>
                    <i class="iconfont">&#xe60f;</i>
                </p>
                <p>
                    <input type="checkbox" class="reg_deal">
                    <b>阅读并同意<a href="">《360用户服务条款》</a>和<a href="">《360用户隐私政策》</a></b>
                    <span class="reg_deal_hint hint"></span>
                </p>
                <p>
                    <input type="submit" value="注册" class="reg_submit" name="reg_submit">
                </p>
                <p>已有账号，<a href="javascript:;" class="user_exist">直接登录</a></p>
            </form>
        </div>
    </div>

    <main>
        <div class="main_header">
            <!-- 主体内容里面的头部导航 -->
            <div class="main_head_box">
                <div class="head_left">
                    <a href="index.html" class="logo"></a>
                    <h2 class="header_title">购物车</h2>
                </div>
            </div>
        </div>

        <div class="cartApp">
            <p class="notice">物流公告：受疫情影响，北京顺义、大兴区，河北省，四川省，辽宁省，黑龙江省，新疆等部分地区暂停发货。</p>
            <table cellspacing="0" class="tables">
                <thead>
                    <tr>
                        <td class="check_all">
                            <input type="checkbox">全选
                        </td>
                        <td>商品</td>
                        <td>属性</td>
                        <td>单价</td>
                        <td>数量</td>
                        <td>小计</td>
                        <td>操作</td>
                    </tr>
                </thead>

                <!-- 购物车列表 -->
                <tbody>
                    <tr class="commodity" style="display: none;">
                        <td class="check_goods">
                            <input type="checkbox">
                        </td>
                        <td class="goods_info">
                            <img src="" alt="" class="pic">
                            <span class="title">商品标题</span>
                        </td>
                        <td class="nature">无</td>
                        <td class="price">
                            <span>单价</span>
                        </td>
                        <td class="goods_num">
                            <a href="javascript:;" class="quantity_red">-</a>
                            <input type="text" class="quantity_num">
                            <a href="javascript:;" class="quantity_add">+</a>
                        </td>
                        <td class="item_total">
                            <span class="total">总价格</span>
                        </td>
                        <td class="js_del">
                            <span class="js_del">删除</span>
                        </td>
                    </tr>
                </tbody>
            </table>

            <!-- 结算 -->
            <div class="stat">
                <div class="stat_left">
                    <input type="checkbox" class="all_select"><span>全选</span>
                    <a class="del_select">删除选中商品</a>
                </div>

                <div class="stat_right">
                    <!-- 已选择的数量 -->
                    <span>已选<strong class="jnum"></strong><b>件</b>商品</span>
                    <!-- 总的价格 -->
                    <strong class="cart_total">合计：￥<span class="all_price"></span></strong>
                    <a class="cart_btn" href="javascript:;">去结算</a>
                </div>

            </div>

            <!-- 确认删除对话框 -->
            <div class="dialog_box">
                <div class="del_dialog" style="display: none;">
                    <div class="dialog_top">
                        <span>提示</span>
                        <a href="javascript:;" class="dialog_close"></a>
                    </div>
                    <div class="dialog_main">
                        <p class="dialog_text">好货不等人，确定删除此商品吗？</p>
                        <div class="dialog_btn">
                            <a href="javascript:;" class="btn_confirm">确认</a>
                            <a href="javascript:;" class="btn_cancel">取消</a>
                        </div>
                    </div>
                </div>
                <!-- 遮罩层 -->
                <div class="mask"></div>
            </div>
        </div>
    </main>

    <footer>
        <div class="footer_box">
            <div class="footer_left">
                <div class="about">
                    <h3>关于商城</h3>
                    <p class="text">
                        360商城是奇虎360公司的官方电商平台，主要经营360安全智能设备，以及相关领域消费品。提供最新的360智能设备，最贴心的售后服务，360社区一手评测资讯，享受360安全、安心、放心的购物体验。
                    </p>
                    <div class="about_us">
                        <span>关于我们</span>
                        <a href=""><i class="iconfont">&#xe643;</i></a>
                        <a href=""><i class="iconfont">&#xe634;</i></a>
                    </div>
                </div>
            </div>
            <div class="footer_middle">
                <ul>
                    <li>
                        <dl>
                            <dt>
                                <h3>售后服务</h3>
                            </dt>
                            <dd><a href="">7日无理由退货</a></dd>
                            <dd><a href="">质量问题15日内换货</a></dd>
                            <dd><a href="">保修条款</a></dd>
                            <dd><a href="">服务流程</a></dd>
                            <dd><a href="">许可协议</a></dd>
                            <dd><a href="">隐私政策</a></dd>
                        </dl>
                    </li>
                    <li>
                        <dl>
                            <dt>
                                <h3>帮助中心</h3>
                            </dt>
                            <dd><a href="">用户注册</a></dd>
                            <dd><a href="">会员说明</a></dd>
                            <dd><a href="">登录与密码找回</a></dd>
                            <dd><a href="">购买指南</a></dd>
                            <dd><a href="">支付方式</a></dd>
                            <dd><a href="">配送与说明</a></dd>
                        </dl>
                    </li>
                    <li>
                        <dl>
                            <dt>
                                <h3>扫码下载APP</h3>
                            </dt>
                            <dd><img src="https://p4.ssl.qhimg.com/t01912e4fcc88786eca.png" alt=""></dd>
                        </dl>
                    </li>
                </ul>
            </div>
            <div class="footer_right">
                <h3 class="helper_title">联系我们</h3>
                <p class="help-text big_text">400-1555-360</p>
                <p class="help-text small_text">周一至周日 9:00-21:00（仅收市话费）</p>
            </div>
        </div>
        <div class="copyright_floor">
            <div class="wrapper">
                <div class="service_list">
                    <a href=""><i class="index_icon icon_refund"></i>7天无理由退货</a>
                    <a href=""><i class="index_icon icon_change"></i>15天免费换货</a>
                    <a href=""><i class="index_icon icon_baodi"></i>满99元包邮 </a>
                </div>

                <div class="copyright_line">
                    <p> ©2019-2021 mall.360.cn版权所有 </p>
                    <p>
                        <a href="" style="color:#fff;">京ICP备08010314号-43</a><a href="" style="color:#fff;"> 营业执照 </a>
                        京公网安备11000002000006号
                    </p>
                    <p style="color:rgba(255,255,255,.5);font-size:12px">公司名称：北京视觉世界科技有限公司 | 社会统一信用代码：91110105336460203N
                        | <a>食品经营许可证</a><br>
                        公司地址：北京市朝阳区酒仙桥路6号院2号楼1至17层102号内5层501 | 联系方式：400-1555-360</p>
                </div>
            </div>
        </div>
    </footer>
</body>

</html>